<template>
	<view>
		<view class="music_list">
			<view class="music_item" v-for="(item,index) in musicList" :key="index" @click="chooseVideoItem(index)">
				<image :src=item.icon mode="aspectFill"></image>
				<view class="music_title"> {{ item.name }} </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 音频数据列表 */
				musicList:[],
			};
		},
		onLoad() {
			this.musicList = getApp().globalData.homeAllMusics;
		},
		methods:{
			chooseVideoItem(index) {
				console.log(index);
			},
		}
	}
</script>

<style lang="scss">
	
	/* 下面的音频分类 */
	.music_list {
		margin: 25rpx 0;
		display: flex;
		flex-wrap: wrap;
		.music_item {
			width: 187.5rpx;
			height: 187.5rpx;
			margin-top: 15rpx;
			text-align: center;
			image {
				margin-top: 15rpx;
				width: 60rpx;
				height: 60rpx;
			}
			.music_title {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: #C4C4C4;
			}
		}
	}

</style>
